template
<template>
  <!-- 主容器布局，采用Element Plus的el-container组件 -->
  <el-container class="container">
    <!-- 左侧边栏区域，固定宽度250px -->
    <el-aside width="250px" class="sidebar">
      <!-- 返回首页功能按钮 -->
      <el-button type="primary" @click="gotoPath('/home')">返回</el-button>

      <!-- 动态菜单组件，根据websocket消息渲染客户端列表 -->
      <el-menu
        :default-active="selectedMenuId"
        active-background-color="#409EFF"
        @select="selectMenu"
      >
        <!-- 循环渲染客户端菜单项 -->
        <el-menu-item v-for="(menu, index) in menus" :key="index" :index="menu.id.toString()">
          {{ menu.name }}
        </el-menu-item>
      </el-menu>
    </el-aside>

    <!-- 主内容区域 -->
    <el-main class="content">
      <!-- 动态子组件容器，根据选中的菜单ID加载对应组件 -->
      <ChildComponent v-if="selectedMenuId" :id="selectedMenuId" ref="childRef" :is-show="isShow" />
    </el-main>
  </el-container>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import ChildComponent from './monitorRight.vue'
import { gotoPath } from '@renderer/api'

// 客户端菜单列表（响应式数据）
const menus = ref([])
// 当前选中的菜单ID（响应式数据）
const selectedMenuId = ref(null)
const isShow = ref(true)
// WebSocket事件监听器引用
let webSocketListener

/**
 * 处理菜单选择事件
 * @param {string} id - 被选中的菜单项ID
 */
const selectMenu = (id) => {
  selectedMenuId.value = id
}

/**
 * WebSocket消息处理器
 * @param {Event} event - WebSocket事件对象
 * @param {string} message - 接收到的消息字符串
 */
const handleWebSocketMessage = (event, message) => {
  const parsedMessage = JSON.parse(message)
  // console.log('WebSocket消息处理器', parsedMessage)
  switch (parsedMessage.type) {
    case 'clients':
      console.log('WebSocket消息处理器', parsedMessage)
      // 更新客户端列表：将ID数组转换为菜单对象数组
      menus.value = parsedMessage.data.map((id) => ({ id, name: `客户端-${id}` }))
      break
    case 'userLeft':
      // 这里卸载子组件ChildComponent
      console.log('用户离开')
      selectedMenuId.value = false
      break
  }
}

// 组件挂载生命周期钩子
onMounted(() => {
  const webSocket = window.api.getWebSocket()
  // 注册WebSocket消息监听器
  webSocketListener = (event, message) => handleWebSocketMessage(event, message)
  webSocket.on(webSocketListener)
})

// 组件卸载生命周期钩子
onUnmounted(() => {
  // 清理WebSocket监听器防止内存泄漏
  const webSocket = window.api.getWebSocket()
  webSocket.removeListener(webSocketListener)
})
</script>

<style scoped>
/* 容器样式：满屏高度 */
.container {
  height: 100vh;
}

/* 侧边栏样式：浅灰色背景+内边距 */
.sidebar {
  background-color: #f4f4f4;
  padding: 10px;
}

/* 内容区域基础内边距 */
.content {
  padding: 10px;
}
</style>
